<template>
    <div class="properties-container">
        <div class="properties-title"><span>系统配置管理</span></div>
        <!-- filter-binding-squere -->
        <div class="table-header-container">
            <div class="filter-container">
                <!--输入属性filter 不一定需要绑定title-->
                <el-input
                        v-model="listQuery.id"
                        placeholder="ID"
                        style="width: 200px"
                />
                <!-- 根据什么排序 -->
                <el-select
                        v-model="listQuery.sortBy"
                        style="width: 140px"
                        class="filter-item"
                        @change="handleSortKeyOptionsChange"
                >
                    <!-- 排序方式 -->
                    <el-option
                            v-for="item in sortKeyOptions"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key"
                    />
                </el-select>
                <!-- 升序和降序 -->
                <el-select
                        v-model="listQuery.isAsc"
                        style="width: 140px"
                        class="filter-item"
                        @change="handleSortOptionsChange"
                >
                    <!-- 排序方式 -->
                    <el-option
                            v-for="item in sortOptions"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key"
                    />
                </el-select>
            </div>
            <div class="header-button-set">
                <el-button
                        style="margin-left: 10px"
                        type="primary"
                        :color="colorManager.getColor('__search_button_color')"
                        @click="handlePage"
                >
                    <el-icon>
                        <Search/>
                    </el-icon>
                    搜索
                </el-button>
                <el-button
                        style="margin-left: 10px"
                        :color="colorManager.getColor('__insert_button_color')"
                        type="primary"
                        @click="handleInsert"
                >
                    <el-icon>
                        <Edit/>
                    </el-icon>
                    添加
                </el-button>
                <el-button
                        type="primary"
                        :color="colorManager.getColor('__refresh_button_color')"
                        @click="getPage"
                >
                    <el-icon>
                        <Bottom/>
                    </el-icon>
                    刷新
                </el-button>
            </div>
        </div>

        <!-- 按钮组结束 -->
        <el-table
                class="core-table"
                v-loading="listLoading"
                :data="pageResult.list"
                border
                fit
                highlight-current-row
        >
            <!-- 代码生成区域 -->
                <el-table-column prop="id" label="主键"/>
                <el-table-column prop="name" label="配置名称"/>
                <el-table-column prop="value" label="此配置对应的内容"/>
            <!-- END 生成结束 -->
            <el-table-column>
                <template #header> 操作</template>
                <template #default="scope">
                    <div class="operate-button-set">
                        <el-button
                                size="small"
                                type="primary"
                                color="rgb(21,149,106)"
                                @click="handleEdit(scope.$index, scope.row)"
                        >
                            修改
                        </el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 表格定义结束 -->
        <pagination
                :pageNo="listQuery.pageNo"
                :pageSize="listQuery.pageSize"
                :disabled="false"
                @getPage="getPage"
                v-model:pageModel="listQuery"
                v-model:resultModel="pageResult"
        ></pagination>

        <!-- 表单弹出层 -->
        <div>
            <Submit
                    v-model:dialogVisible="insertDialogVisible"
                    @refreshList="getPage"
                    dialogTitle="新增中"
                    type="insert"
            ></Submit>
            <Submit
                    v-model:dialogVisible="updateDialogVisible"
                    @refreshList="getPage"
                    dialogTitle="更新中"
                    :id="operateId"
                    type="update"
            ></Submit>
        </div>
    </div>
</template>

<script setup>
    import {ref, onMounted} from "vue";
    import {ElMessage, ElMessageBox} from "element-plus";
    import {
                addProperties,
                getProperties,
                updateProperties,
                listProperties,
                deleteProperties,
    } from "@/api/system/properties/properties.js";
    import Submit from "./components/submit.vue"; // submit固定的子组件
    import {DeleteComfirmBox} from "@/utils/MessageUtils.js";
    import {checkResult} from "@/utils/Rutil.js";
    import {colorManager} from "@/assets/scss/colors-util"; // 固定的颜色管理

    const insertDialogVisible = ref(false);
    const updateDialogVisible = ref(false);
    const listLoading = ref(true);

    /**
     * 排序处理器
     */
// 排序规则--根据哪个列
    var sortKeyOptions = [{ label: "Use ID", key: "id" }];
    const handleSortKeyOptionsChange = (value) => {
        console.log("选中的值：", value);
    };
    // 排序规则--升序和降序
    var sortOptions = [
        { label: "Descending", key: 0 },
        { label: "Ascending", key: 1 },
    ];
    const handleSortOptionsChange = (value) => {
        console.log("选中的值：", value);
    };

    /**
     * 新增处理器
     */
    const handleInsert = async () => {
        insertDialogVisible.value = true;
    };

    // 当前操作的实体的id
    const operateId = ref();

    /**
     * 编辑处理器
     */
    const handleEdit = (index, row) => {
        console.log(index, "row:", row);
        operateId.value = row.id;
        updateDialogVisible.value = true;
    };

    /**
     * 删除处理器
     */
    const handleDelete = async (index, row) => {
        console.log(index, "row", row);
        operateId.value = row.id;
        // 提供删除确认
        const chooseDelete = await DeleteComfirmBox();
        console.log("chooseDelete", chooseDelete);
        if (chooseDelete === true) {
            const res = await deleteProperties(operateId.value);
            console.log("handleDelete-res:", res);
            if (checkResult(res)) {
                ElMessage({
                    type: "success",
                    message: "删除成功！",
                });
                getPage();
            } else {
                ElMessage({
                    type: "error",
                    message: "删除失败！",
                });
            }
        }
    };

    // 请求数据，用于service发送请求
    const listQuery = ref({
        pageNo: 1,
        pageSize: 5,
        isAsc: 1,
        title: "",
        sortBy:"id"
        // judgeStatus: 20102, // 审核通过
    });

    // 需要优先规定totol，否则组件会发出错误
    const pageResult = ref({
        total: 1,
        list: [],
    });

    /**
     * 获取分页
     */
    const getPage = async () => {
        listLoading.value = true;
        const res = await listProperties(listQuery.value);
        console.log(res.data);
        pageResult.value = res.data;
        console.log("pageResult", pageResult.value);
        setTimeout(() => {
            listLoading.value = false;
        }, 250);
    };
    /**
     * 分页请求handle
     */
    const handlePage = () => {
        listQuery.pageNo = 1;
        getPage();
    };

    onMounted(() => {
        console.log(`Properties.vue is now mounted.`);
        handlePage();
    });
</script>

<style lang="scss" scoped>
    .properties-container {
        .properties-title {
            font-size: 30px;
        }

        .table-header-container {
            margin-top: 5px;
            margin-bottom: 5px;
            display: flex;
            align-items: center; /* 可选，根据需要调整子项的对齐方式 */

            .filter-container {
            }

            .header-button-set {
            }
        }

        .core-table {
            margin-top: 5px;
            margin-bottom: 5px;
            width: 100%;
        }
    }

    .operate-button-set {
        .el-button {
            margin: 10px;
        }

        display: flex;
        flex-direction: column;
        align-items: center; /* 可选，用于居中对齐 */
    }
    /* table中列数据的css */
</style>
<!-- 在router中加入子内容：
    {
      path: "/index/properties",
      component: () => import("../views/index/properties/properties.vue"),
    },
  -->
